<project-header class="top-header"></project-header>
<project-page class="project-overview-page">

  <!-- Middle section -->
  <div class="middle-section">
    <div class="middle-container">
      <div class="middle-header header-light">
        <div class="container-fluid">
          <tasks></tasks>

          <div ng-if="renderOptions.showToolbar" class="page-header page-header-bleed-right page-header-bleed-left">
            <h1 title="Overview">Overview</h1>
          </div>
          <!-- TODO handle things that don't live under services -->
          <alerts alerts="alerts"></alerts>
          <div ng-if="renderOptions.showToolbar" class="data-toolbar">
            <div class="data-toolbar-filter">
              <project-filter></project-filter>
            </div>
            <div class="data-toolbar-views pad-left-lg">
              <div class="actions">
                <div class="btn-group">
                  <label class="btn btn-default" ng-model="$parent.overviewMode" uib-btn-radio="'tiles'" title="Tile View">
                    <i class="fa fa-list"></i>
                  </label>
                  <label class="btn btn-default" ng-model="$parent.overviewMode" uib-btn-radio="'topology'" title="Topology View">
                    <i class="pficon pficon-topology"></i>
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div><!-- /middle-header-->
      <div class="middle-content  has-scroll surface-shaded">
        <div class="container-fluid surface-shaded">
          <div class="row">
            <div class="col-md-12 gutter-top">

              <!-- Empty states -->
              <div ng-if="(services | hashSize) === 0 && (monopodsByService[''] | hashSize) === 0 && (deploymentsByServiceByDeploymentConfig[''] | hashSize) === 0">
                <!-- Getting started -->
                <div ng-if="renderOptions.showGetStarted" class="empty-project text-center">
                  <h2>Get started with your project.</h2>
                  <p class="gutter-top">
                    Use your source or an example repository to build an application
                    image, or add components like databases and message queues.
                  </p>
                  <p class="gutter-top">
                    <a ng-href="project/{{projectName}}/create" class="btn btn-lg btn-primary">
                      Add to Project
                    </a>
                  </p>
                </div>
                <!-- Normal empty message (loading... or filtered) -->
                <div ng-if="!renderOptions.showGetStarted">
                  <em>{{emptyMessage}}</em>
                </div>
              </div>

              <div ng-if="overviewMode == 'topology' && !renderOptions.showGetStarted" class="kube-topology-block">
                <kubernetes-topology-graph bottom-of-window="1" items="topologyItems"
                  relations="topologyRelations" kinds="topologyKinds" selection="topologySelection">
                </kubernetes-topology-graph>
                <svg class="kube-topology" hidden>
                  <defs>
                    <g class="Pod" id="vertex-Pod">
                      <circle r="16"></circle>
                      <text y="6" x="0.5">&#xf1b3;</text>
                    </g>
                    <g class="Service" id="vertex-Service">
                      <circle r="16"></circle>
                      <text y="10" x="1">&#xe61e;</text>
                    </g>
                    <g class="ReplicationController" id="vertex-ReplicationController">
                      <circle r="16"></circle>
                      <text y="9">&#xe624;</text>
                    </g>
                    <g class="DeploymentConfig" id="vertex-DeploymentConfig">
                      <circle r="16"></circle>
                      <text y="8">&#xf013;</text>
                    </g>
                    <g class="Route" id="vertex-Route">
                      <circle r="16"></circle>
                      <text y="9">&#xe625;</text>
                    </g>
                  </defs>
                </svg>
              </div>

              <div ng-if="overviewMode == 'tiles'">
                <!-- TODO handle multiple services mapping to the same deploymentConfig/deployment/pod -->
                <section ng-repeat="(serviceId, service) in services" class="components components-group" ng-attr-id="service-{{serviceId}}">
                  <div class="osc-object components-panel service" ng-init="numPorts = service.spec.ports.length" kind="Service" resource="service">
                    <div class="component-block">
                      <div class="component">
                        <div ng-attr-title="{{service | serviceImplicitDNSName}}" class="component-label">
                          <!-- "service" class is present for e2e tests to check   -->
                          Service <span ng-if="displayRouteByService[serviceId]">: <a class="subtle-link service" href="{{service | navigateResourceURL}}">{{serviceId}}</a></span>
                        </div>

                        <!-- Show the route if present -->
                        <h2 ng-if="displayRouteByService[serviceId]" ng-init="otherRoutes = (routesByService[serviceId] | hashSize) - 1">
                          <span ng-if="(displayRouteByService[serviceId] | isWebRoute)">
                            <!-- "route" class is present for e2e tests to check -->
                            <a href="{{displayRouteByService[serviceId] | routeWebURL}}" class="route" target="_blank">{{displayRouteByService[serviceId] | routeLabel}}</a>
                          </span>
                          <!-- "route" class is present for e2e test -->
                          <span ng-if="!(displayRouteByService[serviceId] | isWebRoute)" class="route">
                            {{displayRouteByService[serviceId] | routeLabel}}
                          </span>
                          <span class="small" ng-if="otherRoutes">
                            (and
                            <a href="project/{{projectName}}/browse/routes"><span ng-if="otherRoutes === 1">one other route</span
                                ><span ng-if="otherRoutes > 1">{{otherRoutes}} other routes</span></a>)
                          </span>
                          <span ng-if="!otherRoutes">
                            <route-warnings warnings="routeWarningsByService[serviceId][displayRouteByService[serviceId].metadata.name]"></route-warnings>
                          </span>
                          <div ng-if="(routeWarningsByService[serviceId] | hashSize) > 0 && otherRoutes">
                            <small>
                              <span class="pficon pficon-warning-triangle-o" aria-hidden="true"></span>
                              This service has <a href="project/{{projectName}}/browse/routes">routes</a> with warnings.
                            </small>
                          </div>                          
                        </h2>

                        <!-- If no route is present, show the service name large -->
                        <!-- "service" class is present for e2e tests to check   -->
                        <h2 ng-if="!displayRouteByService[serviceId]">
                          <a class="service" href="{{service | navigateResourceURL}}">{{serviceId}}</a>
                        </h2>
                      </div>

                      <div class="component meta-data">
                        <span ng-if="numPorts" class="ports">
                          <!--
                          Show only the first two ports if there are many since we don't have much space here.
                          The full list is visible elsewhere.
                          -->
                          <span ng-repeat="portMapping in service.spec.ports | orderBy:'port' | limitTo:2">
                            <!-- Group port mappings and allow multiple mappings to stack if needed -->
                            <span class="port-mappings">
                              <!-- TODO: Include the port name directly in the content.
                                         There's just not enough room now, and we already have problems with wrapping. -->
                              <span ng-attr-title="{{portMapping.name}}">{{portMapping.port}}/{{portMapping.protocol}}</span>&#8201;&#8594;&#8201;{{portMapping.targetPort}}<span ng-if="$index < (numPorts - 1)">, </span></span>
                          </span>
                          <span ng-if="numPorts > 2" ng-init="numRemaining = numPorts - 2" class="more-ports">
                            and {{numRemaining}} {{numRemaining == 1 ? "other" : "others"}}
                          </span>
                        </span>
                        <div ng-if="!displayRouteByService[serviceId]" class="add-route-link">
                          <a ng-href="project/{{project.metadata.name}}/create-route?service={{service.metadata.name}}">Create Route</a>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!--
                  Iterate over deploymentConfigs for this service.
                  Find ones that don't have any deployments for this service.
                  These are likely new, and could have incoming builds, which we want to surface.
                   -->
                  <div ng-repeat="(deploymentConfigId, deploymentConfig) in deploymentConfigsByService[serviceId]"
                       ng-if="!deploymentsByServiceByDeploymentConfig[serviceId][deploymentConfigId]">
                    <!--
                    Pods in deployments created from this deployment config will be routed to by this service.
                    Show things related to triggers that are about to create stuff, like builds.
                    -->
                    <triggers triggers="deploymentConfig.spec.triggers" builds-by-output-image="recentBuildsByOutputImage" namespace="projectName"></triggers>
                  </div>
                  <!--
                  Iterate over all deployments for this service grouped by deploymentConfig (or lack thereof)
                  -->
                  <div ng-repeat="(deploymentConfigId, deployments) in deploymentsByServiceByDeploymentConfig[serviceId]">
                    <!--
                    deploymentConfig could be null:
                    1. when we have replicationControllers that were not generated from a deploymentConfig (deploymentConfigId=='')
                    2. when the deploymentConfig for these deployments no longer exists
                    3. when the deploymentConfig for these deployments no longer falls under this service
                    -->
                    <div ng-if="deploymentConfigsByService[serviceId][deploymentConfigId]">
                      <!--
                      Pods in deployments created from this deployment config will be routed to by this service.
                      Show things related to triggers that are about to create stuff, like builds.
                      -->
                      <triggers triggers="deploymentConfigsByService[serviceId][deploymentConfigId].spec.triggers" builds-by-output-image="recentBuildsByOutputImage" namespace="projectName"></triggers>
                    </div>

                    <div ng-repeat="deployment in deployments | orderObjectsByDate : true track by (deployment | uid)"
                         ng-if="isVisibleDeployment(deployment)"
                         class="animate-repeat">

                      <!-- Make sure deploymentConfigs are loaded before testing if the deployment config is missing. -->
                      <overview-deployment
                        rc="deployment"
                        deployment-config-id="deploymentConfigId"
                        deployment-config-missing="deploymentConfigs && !deploymentConfigs[deploymentConfigId]"
                        deployment-config-different-service="deploymentConfigs[deploymentConfigId] && !deploymentConfigsByService[serviceId][deploymentConfigId]"
                        deployment-config="deploymentConfigs[deploymentConfigId]"
                        scalable="isScalable(deployment, deploymentConfigId)"
                        hpa="getHPA(deployment.metadata.name, deploymentConfigId)"
                        limit-ranges="limitRanges"
                        project="project"
                        images-by-docker-reference="imagesByDockerReference"
                        builds="builds"
                        pods="podsByDeployment[deployment.metadata.name]"
                        alerts="alerts">
                      </overview-deployment>
                    </div>
                  </div>

                  <!-- Now go through any of the pods that are routed to by the service but not part of a deployment -->
                  <div ng-repeat="pod in monopodsByService[serviceId] track by (pod | uid)">
                    <overview-monopod pod="pod"></overview-monopod>
                  </div>

                  <!-- TODO implement filters for empty and present to return booleans for cases like this -->
                  <div ng-if="(podsByService[serviceId] | hashSize) === 0 && (deploymentsByServiceByDeploymentConfig[serviceId] | hashSize) === 0"
                       class="osc-object components-panel deployment-block deployments none">
                    <span class="pficon pficon-info"></span> There are no pods or deployments for this service.
                  </div>
                </section>

                <!-- Show deploymentsConfigs not in a service -->
                <section ng-repeat="(deploymentConfigId, deployments) in deploymentsByServiceByDeploymentConfig['']" class="components">
                  <div ng-repeat="(deploymentId, deployment) in deploymentsByServiceByDeploymentConfig[''][deploymentConfigId] track by (deployment | uid)"
                       ng-if="isVisibleDeployment(deployment)">
                    <div class="builds-no-service" ng-if="deploymentConfigs[deploymentConfigId] && deploymentConfigsByService[''][deploymentConfigId]">
                      <!--
                      Pods in deployments created from this deployment config will not be routed to by any service.
                      Show things related to triggers that are about to create stuff, like builds.
                      -->
                      <triggers triggers="deploymentConfigs[deploymentConfigId].spec.triggers" builds-by-output-image="recentBuildsByOutputImage" namespace="projectName"></triggers>
                    </div>
                    <!-- Make sure deploymentConfigs are loaded before testing if the deployment config is missing. -->
                    <overview-deployment
                      rc="deployment"
                      deployment-config-id="deploymentConfigId"
                      deployment-config-missing="deploymentConfigs && !deploymentConfigs[deploymentConfigId]"
                      deployment-config-different-service="deploymentConfigs[deploymentConfigId] && !deploymentConfigsByService[''][deploymentConfigId]"
                      scalable="isScalable(deployment, deploymentConfigId)"
                      hpa="getHPA(deployment.metadata.name, deploymentConfigId)"
                      limit-ranges="limitRanges"
                      project="project"
                      images-by-docker-reference="imagesByDockerReference"
                      builds="builds"
                      pods="podsByDeployment[deployment.metadata.name]">
                    </overview-deployment>
                  </div>
                </section>

                <section ng-repeat="pod in monopodsByService[''] track by (pod | uid)" class="components">
                  <overview-monopod pod="pod"></overview-monopod>
                </section>
              </div>

            </div><!-- /col-* -->
          </div>
        </div>
      </div><!-- /middle-content -->
    </div><!-- /middle-container -->
  </div><!-- /middle-section -->
</project-page>
